//配置路由
//引入vue-router插件:经过打印查看,引入进来的VueRouter构造函数
//vue基础学习构造函数:Vue、VueComponent、Vuex.Store、VueRouter
import VueRouter from 'vue-router';
import Vue from 'vue';
//安装插件
Vue.use(VueRouter);
//引入路由组件
import Home from '@/pages/Home';
import About from '@/pages/About';

//引入二级路由【Home路由组件里面嵌套的子路由】
import News from '@/pages/homes/News';
import Messaage from '@/pages/homes/Message';

//引入三级路由【Message路由组件子路由Detail】
import Detail from '@/pages/homes/messages/Detail';

//配置项目的路由
//通过VueRouter【路由器】类,创建了一个VueRouter类的一个实例！！！
//对外暴露
export default new VueRouter({
     mode:'history',
    //配置项的K是没有商量的余地[route:路由]
    routes: [
        {
            //path设置路由的K,path有的属性值务必都是小写的(设置path右侧V的时候，别忘记反斜杠)
            path: "/home",
            //component设置路由的V,一个K对应一个V
            component: Home,
            //配置项:里面出现children,children里面放置的一定是子路由
            children: [
                {
                    //第一种写法:路径书写全面,把上一级的路径带上
                    // /home/news      news 
                    path: 'news',
                    component: News
                },
                {
                    //第二种写法:起一个子路由的名字即可【前面页不需要带/】
                    // /home/message    message
                    path: 'message',//相当于->/home/message
                    component: Messaage,
                    children: [
                        {
                            //命名路由,给路由起一个名字
                            name:"erha",
                            //动态路由务必传递两个params参数
                            path: 'detail/:id/:name',
                            component:Detail
                        }
                    ]
                }
            ]
        },
        {
            path: '/about',
            component: About
        },
        //重定向书写位置,可以放在任意地方（不能放在路由里面），一般都是书写在最后位置
        {
            path: '/',
            //重定向：重定向到about这个K
            redirect: "/about"
        }
    ]
});



